<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<style>
			input+span {
				color: red;
			}
		</style>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function() {
				$(".validate").blur(function() {
					console.log(this.pattern);
					let reg = new RegExp("^"+this.pattern+"$", 'ig');
					console.log(reg, this.value);
					//console.log(reg.test(this.value));
					if (reg.test(this.value)) { 
						$(this).next().html("");
					} else {
						//  $(this).next().html("error");
						$(this).next().html($(this).next().attr("err-msg"));
					}

				});
				$(":password[name=repass]").blur(function(){
					let pa=$("[name=pass]").val();
					if(pa!=this.value){
						$(this).next().html("两次密码输入不一致！");
					}else{
						$(this).next().empty();
					}
				});
				//协议框单独处理
				$(":submit").click(function(){
					//console.log($("[name=accept]").is(":checked"));
					if($("[name=accept]").is(":checked")==false){
						$("[name=accept]").next().html("必须同意协议");
						return false;
					}
					return true;
				});
			});
		</script>
	</head>
	<body>
		<form action="1.html">
			<p>
				<label>手机号:</label><input type="tel" class="validate" name="phone" placeholder="请输入手机号" required
					pattern="1[3-9]\d{9}" />
				<span err-msg="请填写正确的手机号"></span>
			</p>
			<p>
				<label>密码:</label><input type="password" class="validate" name="pass" placeholder="密码8-20个字符" required
					pattern="\w{8,20}" />
				<span err-msg="密码必须是8-20个字符，不能有特殊符号"></span>
			</p>
			<p>
				<label>再次密码:</label><input class="validate" type="password" name="repass" placeholder="密码8-20个字符"
					required pattern="\w{8,20}" /><span err-msg="密码必须是8-20个字符，不能有特殊符号"></span>
			</p>
			<p><label>您的姓名</label>
				<input type="text" name="yourname" class="validate" required placeholder="2-10个汉字"
					pattern="[\u4e00-\u9fa5]{2,10}" /><span err-msg="姓名必须是2-10个汉字"></span>
			</p>
			<p><label>请同意我们的<a href="#">用户协议</a></label>
				<input type="checkbox" name="accept" value="yes" required /><span err-msg="必须同意我们的协议"></span>
			</p>
			<p>
				<label>爱好:</label>
				<input type="checkbox" name="like" value="singing" />唱歌
				<input type="checkbox" name="like" value="dancing" />跳舞
				<input type="checkbox" name="like" value="rap" />说唱
				<input type="checkbox" name="like" checked value="篮球" />篮球
				<input type="checkbox" name="like" value="打游戏" />打游戏
				<span err-msg="必须选择两个"></span>
			</p>
			
			<p>
				<button type="submit">登录</button>
			</p>
		</form>
	</body>
</html>
